<template>
  <div class="ki-echart">
    <div class="pic" ref="echartsRef" :style="echartsStyle"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted, watchEffect} from 'vue'
const echartsRef = ref<HTMLElement>()
const props = defineProps({
  options:{
    type:Object,
    required:true
  },
  echartsStyle:{
    type:Object,
    default:() => ({width:'100%',height:'300px'})
  }
})

onMounted(() => {
  const myChart = echarts.init(echartsRef.value!)
  watchEffect(() => {
    myChart.setOption(props.options)
  })
  const updateSize = () => {
    myChart.resize()
  }
  updateSize()

  window.addEventListener('resize', () => {
    myChart.resize()
  })
})
</script>

<style scoped>
.ki-echart{
  height: 300px;
}
</style>